<template>
  <div>
    <Header />
    <Banner :detailList="detailList" :gallaryImgs="gallaryImgs" />
    <DetailList :categoryList="categoryList" />
  </div>
</template>

<script>
import DetailList from './List'
import Banner from './Banner'
import Header from './Header'
import { mapState, mapGetters } from 'vuex'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Detail',
  components: {
    Banner,
    Header,
    DetailList
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    ...mapState({
      detailList: (state) => state.detail.detailList
    }),
    ...mapGetters(['gallaryImgs', 'categoryList'])
  },

  methods: {
    handlebanner() {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped></style>
